<template>
  <div v-if="userInfo" style="text-align: center;">
    <van-image round width="8rem" height="8rem" :src="userInfo.avatarUrl"
      style="margin-top: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4)" />
  </div>
  <van-cell title="昵称" :value="userInfo.username ? userInfo.username : `该用户很懒，未填写`" icon="user-o" />
  <van-cell title="性别" :value="userInfo.gender === 1 ? '男' : '女'" icon="contact-o" />
  <van-cell title="个人介绍" :value="userInfo.profile ? userInfo.profile : `该用户很懒，未填写`" icon="comment-o" />
  <van-cell title="联系方式" :value="userInfo.phone ? userInfo.phone : `该用户很懒，未填写`" icon="phone-o" />
  <van-cell title="邮箱" :value="userInfo.email ? userInfo.email : '该用户很懒，未填写'" icon="envelop-o" />
  <van-cell title="个人标签" >
    <van-tag round type="success" v-for="tag in tags">{{ tag }}</van-tag>
  </van-cell>

  <div style="text-align: center; margin-top: 10px;">
    <van-button icon="plus" type="success" text="添加好友" size="normal" style="border-radius: 10px; margin-top: 10px"
      @click="addFriend" v-if="!flag" />
    <van-button icon="cross" type="danger" text="移除好友" size="normal" style="border-radius: 10px; margin-top: 10px"
      @click="deleteFriend" v-else />
  </div>

</template>

<script setup lang="ts">

import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import request from '@/utils/axios'
import { UserType } from "../models/user";

const route = useRoute();
const router = useRouter()


let flag = ref(route.meta.flag);

const userId = route.query.id


//@ts-ignore
const userInfo = ref<UserType>({})
const tags = ref([])

onMounted(async () => {
  const res = await request.get('user/' + userId)

  userInfo.value = res.data
  userInfo.value.avatarUrl = "data:image/png;base64," + res.data.avatarUrl
  tags.value = res.data.tags.replace(']','').replace('[','').split(',')
})
const addFriend = async () => {
  const res = await request.post('/friend/add', {
    friendId: userInfo.value.id
  });
  //@ts-ignore
  if (res?.code === 0) {
    //@ts-ignore
    showToast('添加成功');
    router.push('/friend')
  } else {
    //@ts-ignore
    showToast(res.description);
  }
};

const deleteFriend = async () => {
  const res = await request.post('/friend/delete', {
    friendId: userInfo.value.id
  });
  if (res.data) {
    //@ts-ignore
    showSuccessToast("删除成功")
    router.push('/friend')
  } else {
    //@ts-ignore
    showFailToast('删除失败！')
  }
}


</script>



<style scoped></style>